<template>
  <div v-if="checkedUserVisible">
    <div
      v-if="checkedUserVisible"
      class="checkedMask"
      style="position: fixed;top:0;left:0;right:0;bottom:0;opacity: .5;background: #000;z-index: -1"
    />
    <el-dialog
      id="chenckedUsersDialog"
      :visible.sync="checkedUserVisible"
      :modal="false"
      v-if="checkedUserVisible"
      width="800px"
      top="0"
      append-to-body
      custom-class="chenckedUsersDialog"
    >
      <template #title>
        {{ $t('m.weiyou_selected') }}（{{ selectedNameList.length }}）
      </template>

      <div class="userNames">
        <draggable
          :list="selectedNameList"
          :disabled="showType != 'create'"
        >
          <transition-group>
            <el-tag
              v-for="(item, index) in selectedNameList"
              :key="index"
              :disable-transitions="false"
              @close="handleClose(item,index)"
              :closable="showType == 'create'"
              type="info"
            >
              {{ item.name }}
            </el-tag>
          </transition-group>
        </draggable>
      </div>

      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          @click="handleOk"
          v-if="showType == 'create'"
          type="primary"
        >
          {{ $t('m.weiyou_sure') }}
        </el-button>
        <el-button @click="checkedUserVisible = false">
          {{ $t('m.weiyou_close') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import getMaxZindex from '../util/getZindex';

export default {
  name: 'UserNames',
  components: { draggable },
  props: {
    userMap: {
      type: Object,
      default() {
        return {};
      },
    },
    selectedIdList: {
      type: Array,
      default() {
        return [];
      },
    },
    showType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      checkedUserVisible: false,
      selectedNameList: [],

    };
  },
  watch: {
    checkedUserVisible(nv) {
      if (nv) {
        // 处理展示层级
        this.$nextTick(() => {
          $('#chenckedUsersDialog').css({ 'z-index': getMaxZindex() + 2 });
          $('.checkedMask').css({ 'z-index': getMaxZindex() - 1 });
          this.selectedNameList = [];
          this.selectedIdList.forEach((id) => {
            this.selectedNameList.push(this.userMap[id]);
          });
        });
      }
    },
  },
  methods: {
    // 删除
    handleClose(item, index) {
      this.selectedNameList.splice(index, 1);
      delete this.userMap[item.id];
    },
    // 确定
    handleOk() {
      const newIds = [];
      this.selectedNameList.forEach((item) => {
        newIds.push(item.id);
      });
      this.$emit('dragUser', newIds, this.userMap);
      this.checkedUserVisible = false;
    },
  },
};
</script>
<style lang="scss">
.chenckedUsersDialog {
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  .el-dialog__header {
    color: #444;
    font-weight: 500;
    font-size: 18px;
  }
  .el-dialog__body {
    height: 485px;
    overflow-y: auto;
    padding-top: 0;
    .userNames {
      width: 100%;
      overflow: auto;
      position: relative;
      .el-tag.el-tag--info {
        margin: 5px 10px;
        padding: 0 20px;
      }
    }
  }
  .el-button--primary {
    background-color: #386ad0;
    border-color: #386ad0;
  }
  .el-button--primary:hover {
    background-color: #409eff;
    border-color: #409eff;
  }
}
</style>
